<template>
  <div class="swiper-container">
    <div :class="defaultSwiperClasses.wrapperClass">
      <slot></slot>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/swiper.scss';
export default {
  name: 'Swiper',
  props: {
    options: {
      type: Object,
      default() {
        return {
          autoplay: 3500,
        };
      },
    },
  },
  data() {
    return {
      swiper: null,
      defaultSwiperClasses: {
        wrapperClass: 'swiper-wrapper',
      },
    };
  },
  mounted() {
    this.$nextTick(this.mount);
  },
  methods: {
    mount() {
      if (!this.swiper) {
        let setClassName = false;
        for (let className in this.defaultSwiperClasses) {
          // eslint-disable-next-line no-prototype-builtins
          if (this.defaultSwiperClasses.hasOwnProperty(className)) {
            if (this.options[className]) {
              setClassName = true;
              this.defaultSwiperClasses[className] = this.options[className];
            }
          }
        }
        let mountInstance = () => {
          this.swiper = new Swiper(this.$el, this.options);
        };
        setClassName ? this.$nextTick(mountInstance) : mountInstance();
      }
    },
  },
  updated() {
    if (this.swiper) {
      this.swiper.destroy();
      delete this.swiper;
      this.mount();
    }
  },
  beforeDestroy() {
    if (this.swiper) {
      this.swiper.destroy();
      delete this.swiper;
    }
  },
};
</script>
<style lang="scss">
.bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  background: #defdf2;
  opacity: 0.5;
  border-radius: 50%;
}
.bullet-active {
  background: #defdf2;
  opacity: 1;
}
</style>
